<template>
	<view class="container">
		<view class="formBox">

			<u--form labelPosition="top" labelWidth="auto" :model="model" :rules="rules" ref="form">
				<u-form-item label="所属业主:" prop="username" borderBottom>
					<u--input v-model="model.username" placeholder="请输入房屋所属业主" border="none"></u--input>
				</u-form-item>
				<u-form-item label="身份证号:" prop="identityCard" borderBottom>
					<u--input v-model="model.identityCard" placeholder="请输入身份证号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系电话:" prop="phonenumber" borderBottom>
					<u--input v-model="model.phonenumber" placeholder="请输入房屋所属业主联系电话" border="none"></u--input>
				</u-form-item>
				<u-form-item label="所在小区：" prop="housingName" borderBottom @click="openHousList()">
					<u--input v-model="model.housingName" disabled disabledColor="#ffffff" placeholder="请选择房屋所在小区"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="房屋地址(例如:x栋xx号)：" prop="address" borderBottom>
					<u--input v-model="model.address" disabledColor="#ffffff" placeholder="请选择房屋所在小区的楼层号" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="房屋面积:" prop="area" borderBottom>
					<u--input v-model="model.area" placeholder="请输入屋面积" border="none"></u--input>
					<u--text type="info" size="28" text="㎡"></u--text>
				</u-form-item>
			</u--form>
			<u-gap height="64"></u-gap>
			<u-button type="primary" text="提交" @click="submit"></u-button>
			<u-gap height="16"></u-gap>
		</view>
		<u-picker :show="showhouse" ref="uPicker" keyName="name" itemHeight="88" :columns="houselist"
			@confirm="confirmhouse" @close="showhouse = false;" @cancel="showhouse = false;" :defaultIndex="defaultIndex" :closeOnClickOverlay="true"></u-picker>

		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<script>
	import api from "@/api/api.js"
	import {
		mapActions,
		mapState,
		mapMutations
	} from "vuex"
	export default {
		name: '',
		components: {},
		data() {
			return {
				state: 'new',

				loading: false,
				model: {
					username: null, //所属业主
					identityCard: null, //请输入身份证号
					phonenumber: null, //联系电话
					housingId: null, //所在小区id
					housingName: null, //所在小区名
					address: null, //房屋地址
					area: null //房屋面积
				},
				rules: {
					username: [{
							type: 'string',
							required: true,
							message: '房屋所属业主不能为空',
							trigger: ['blur', 'change']
						}, // 正则判断
						{
							pattern: /^([\u4e00-\u9fa5·]{2,16})$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请输入中文'
						}
					],

					identityCard: [{
							type: 'string',
							required: true,
							message: '身份证号不能为空',
							trigger: ['blur', 'change']
						},
						// 正则判断
						{
							pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请输入身份证号'
						},
					],
					phonenumber: [{
							type: 'string',
							required: true,
							message: '房屋所属业主联系电话不能为空',
							trigger: ['blur', 'change']
						},
						// 正则判断
						{
							pattern: /^((\+|00)86)?1[3-9]\d{9}$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请输入正确手机号'
						},
					],
					housingId: [{
						type: 'string',
						required: true,
						message: '请选择所在小区',
						trigger: ['blur', 'change']
					}],
					address: [{
						type: 'string',
						required: true,
						message: '请选择地址',
						trigger: ['blur', 'change']
					}],
					area: [{
							type: 'string',
							required: true,
							message: '请填写',
							trigger: ['blur', 'change']
						},
						// 正则判断
						{
							pattern: /^\d+(\.\d+)?$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请输入正确的数字'
						},
					],
				},
				houselist: [],
				showhouse: false,
				defaultIndex: [0],
				editId: null
			}
		},
		created() {

		},
		async onLoad(e) {
			this.getHouselist()
			if (e.state === 'edit') {
				this.state = 'edit'
				this.editId = e.editId;

			} else {
				this.state = 'new'
			}
		},
		mounted() {},
		destroyed() {},
		methods: {
			// 获取房屋信息详情
			getHouseInfo() {
				const that = this;
				let data = {
					id: this.editId
				}
				api.getHouseInfo(data).then(res => {
					console.log('getHouseInfo')
					if (res.data.code == 200) {
						let model = {
							username: res.data.data.username, //所属业主
							identityCard: res.data.data.identityCard, //请输入身份证号
							phonenumber: res.data.data.phonenumber, //联系电话
							housingId: res.data.data.housingId, //所在小区id
							housingName: that.houselist[0][res.data.data.housingId - 1].name, //所在小区名
							address: res.data.data.address, //房屋地址
							area: res.data.data.area //房屋面积
						}
						that.model = model;
					}
				}).catch(err => {
					console.log(err)
				})
			},

			// 表单提交
			submit() {
				const that = this;

				this.$refs.form.validate().then(res => {
					let userInfo = uni.getStorageSync('userInfo')
					let data = {
						userId: userInfo.id,
						username: that.model.username, //所属业主
						identityCard: that.model.identityCard, //请输入身份证号
						phonenumber: that.model.phonenumber, //联系电话
						housingId: that.model.housingId, //所在小区id
						address: that.model.address, //房屋地址
						area: that.model.area //房屋面积
					}
					this.loading = true
					if (this.state === 'edit') {
						data.id = this.editId;
						api.getHouseEdit(data).then(resp => {
							console.log('getHouseAdd', resp)
							if (resp.data.code == 200) {
								uni.$u.toast('修改成功')
								setTimeout(() => {
									uni.$u.route({
										type: "navigateBack",
										delta: 1
									})
									this.loading = false;
								}, 300)
						
							}
						}).catch(err => {
							uni.$u.toast(err)
						})
					} else {
						api.getHouseAdd(data).then(resp => {
							console.log('getHouseAdd', resp)
							if (resp.data.code == 200) {
								uni.$u.toast('新建成功')
								setTimeout(() => {
									uni.$u.route({
										type: "navigateBack",
										delta: 1
									})
									this.loading = false;
								}, 300)

							}
						}).catch(err => {
							uni.$u.toast(err.msg)
						})
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 获取小区列表
			getHouselist() {
				api.getHouselist().then(res => {
					if (res.data.code === 200) {
						this.houselist = [];
						this.houselist.splice(0, 1, res.data.rows);
						if (this.state == 'edit') {
							console.log('getHouselist', this.houselist)
							this.getHouseInfo()

						}

					}
				}).catch(err => {
					console.log(err)
				})
			},
			openHousList() {
				this.showhouse = true
			},
			confirmhouse(e) {
				console.log('confirmhouse', e.value[0].id)
				this.defaultIndex = e.indexs;
				this.model.housingId = e.value[0].id;
				this.model.housingName = e.value[0].name;
				this.showhouse = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: calc(100% - 32rpx);
		padding: 0 16rpx;
	}

	.formBox {
		width: calc(100% - 64rpx);
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;
	}
</style>
